<template>
  <div class="blue-dialog">
    <div class="dialog-wrapper">
      <div class="content">
        <div class="content-header">
          <div class="title">检测</div>
          <div class="close" @click="close"></div>
        </div>
        <div class="content-body">
          <div class="header">
            <div>共<span>{{total}}</span>台设备</div>
            <el-button  type="primary" @click="allCheck">一键检测</el-button>
          </div>

          <div class="card-group">
            <el-scrollbar style="height:100%">
              <div class="card-item" v-for="(option,i) in reactiveData.deviceList" :key="i">
                <div class="card-header">
                  <div class="title">设备{{i+1}}: {{option.sn}}</div>
                  <el-button  type="primary" @click="checkDevice(option)" v-if="!option.isChecking">检测</el-button>
                  <el-button  type="primary" :loading="true" v-else>检测中</el-button>
                </div>
                <div class="card-body">
                  <div class="item" v-for="(check,index) in option.checkList" :key="index" :style="{'background':  'url('+ getImage(`dialog/card-bg${check.status === 2?'': check.status === 0? '-success' : '-error' }.png`) +') no-repeat',}">
                    <div class="item-img">
                      <img :src="getImage(`dialog/${check.imageName}${check.status === 2?'_n': check.status === 0? '' : '_e'}.png`)" alt="">
                    </div>
                    <div class="item-text">{{check.name}}</div>
                    <div class="status-name">
                      <img :src="getImage(`dialog/${check.status === 2?'dai': check.status === 0? 'zheng' : 'yi'}.png`)" alt="">
                      <div class="name" :style="{color:check.status === 2 ? '#b2bec7': check.status === 0? '#36D276' : '#F53A28'}">{{check.status === 2?'待检测': check.status === 0? '正常' : '异常'}}</div>
                    </div>
                    <div v-show="option.isChecking || check.children[0].status === 0 || 1" class="status-detail">
                      <div class="status-detail-item" v-for="(data,cIndex) in check.children" :key="cIndex">
                        <div class="name">{{data.name}}</div>
                        <img :src="getImage(`dialog/check-${data.status}.png`)" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang=ts>
import { ElMessage } from 'element-plus'
import { getImage } from "@/utils/util";
import { checkUavStatus } from '@/api/task'

import { ref, reactive } from "vue";

let total = ref(0)

let reactiveData:any = reactive({
  deviceList:[],
  checkList:[]
})

interface deviceObj {
  tbTaskUavList:[]
}

const props = defineProps<{
  deviceData: deviceObj;
}>();
const emit = defineEmits(["close"]);

const close = () =>{
  emit("close");
}

const setDefault = () =>{
  props.deviceData.tbTaskUavList.forEach((item:any) => {
    if (item && item.uavSn) {
      reactiveData.deviceList.push({
        sn: item.uavSn,
        isChecking: false,
        checkList: [
          {
            name: '客户端',
            isChecking: false,
            imageName: 'ic_kehu',
            status: 2,
            children: [
              {
                name: '与无人机mqtt消息中心连接',
                status: 2
              },
              {
                name: '与视频引擎服务器连接',
                status: 2
              }
            ]
          },
          {
            name: '飞控端',
            isChecking: false,
            imageName: 'ic_feikong',
            status: 2,
            children: [
              {
                name: '飞控端登录',
                status: 2
              },
              {
                name: '摄像头挂载',
                status: 2
              }
            ]
          },
          {
            name: '视频流服务端',
            isChecking: false,
            imageName: 'ic_shipin',
            status: 2,
            children: [
              {
                name: '获取视频地址接口服务',
                status: 2
              }
            ]
          }
        ]
      })
    }
  })
  total.value = reactiveData.deviceList.length
}

const allCheck = () =>{
  reactiveData.deviceList.forEach((item:any) => {
    checkDevice(item)
  })
}

const checkDevice = async (data:any) =>{
  data.checkList = [
    {
      name: '客户端',
      isChecking: false,
      imageName: 'ic_kehu',
      status: 2,
      children: [
        {
          name: '与无人机mqtt消息中心连接',
          status: 2
        },
        {
          name: '与视频引擎服务器连接',
          status: 2
        }
      ]
    },
    {
      name: '飞控端',
      isChecking: false,
      imageName: 'ic_feikong',
      status: 2,
      children: [
        {
          name: '飞控端登录',
          status: 2
        },
        {
          name: '摄像头挂载',
          status: 2
        }
      ]
    },
    {
      name: '视频流服务端',
      isChecking: false,
      imageName: 'ic_shipin',
      status: 2,
      children: [
        {
          name: '获取视频地址接口服务',
          status: 2
        }
      ]
    }
  ]
  data.isChecking = true
  const res:any = await checkUavStatus({ deviceSn: data.sn })
  if (res.statusCode === 200) {

    if (res.data.mqttServerCheckStatus) {
      data.checkList[0].isChecking = true
      const isMqtt = await setDataStatusPromise(data.checkList[0].children[0], res.data.mqttServerCheckStatus.proposeList)
      if (isMqtt) {
        const isVideoEngine = await setDataStatusPromise(data.checkList[0].children[1], res.data.videoEngineServerCheckStatus.proposeList)
        if (isVideoEngine) {
          data.checkList[0].status = 0
          const isFlightControl = await setDataStatusPromise(data.checkList[1].children[0], res.data.flightControl.proposeList)
          if (isFlightControl) {
            const isCameraControl = await setDataStatusPromise(data.checkList[1].children[1], res.data.cameraControl.proposeList)
            if (isCameraControl) {
              data.checkList[1].status = 0
              const rsControl = await setDataStatusPromise(data.checkList[2].children[0], res.data.rsControl.proposeList)
              if (rsControl) {
                data.checkList[2].status = 0
                data.isChecking = false
              } else {
                data.checkList[2].status = 1
                data.isChecking = false
              }
            } else {
              data.checkList[1].status = 1
              data.isChecking = false
            }
          } else {
            data.checkList[1].status = 1
            data.isChecking = false
          }
        } else {
          data.checkList[0].status = 1
          data.isChecking = false
        }
      } else {
        data.checkList[0].status = 1
        data.isChecking = false
      }
    }
  }

}

const setDataStatusPromise = (data:any, errList:any) =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (errList.length > 0) {
        data.status = 1
        resolve(false)
      } else {
        data.status = 0
        resolve(true)
      }
    }, 1000);
  })
}

setDefault()


</script>


<style lang="less" scoped>
@import url('@/assets/css//dialog.less');
.content-body {
  padding: 10px;
  .header {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 2px;
    margin-right: 32px;
    span {
      color: #488cff;
    }
  }
  .card-group {
    width: 745px;
    height: 680px;
    margin-top: 10px;
    .card-item {
      width: 743px;
      height: 326px;
      background: url(@/assets/image/dialog/bar-border.png) no-repeat;
      background-size: 100% 100%;
      margin-bottom: 10px;
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        .title {
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          font-size: 16px;
          display: flex;
          align-items: center;

          &::before {
            content: "";
            display: block;
            width: 4px;
            height: 12px;
            background: #488cff;
            margin-right: 15px;
          }
        }
      }
      .card-body {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item {
          width: 229px;
          height: 210px;
          padding-top: 36px;

          background-size: 100% 100%;
          text-align: center;
          .item-text {
            margin: 10px 0;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #48525d;
          }
          .status-name {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            img {
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
          }
          .status-detail {
            height: 70px;
            width: 180px;
            padding: 10px 20px;
            .status-detail-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin: 5px 0;
              .name {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9fa8af;
              }
            }
          }
        }
      }
    }
  }
}
</style>